<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="forum/iconfont.css">
		<link rel="stylesheet" href="../stylesheets/main.css" />
		<link rel="stylesheet" href="../stylesheets/root.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: RGB(133, 184, 244);
			}

			/* 	入口的背景 */
			.background-box {
				width: 100%;
				height: 6vh;
				background-color: #fff;
				padding: 2vh;
				box-sizing: border-box;
				display: flex;
				align-items: center;
			}

			.iconfont {
				font-family: "iconfont" !important;
				font-size: 3.5vh;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;

			}

			/* 搜索 */
			.search {
				margin: 2vw;
				width: 92vw;
				border: #fff solid 1vw;
				background-color: #fff;
				border-radius: 1vh;
				display: flex;
				flex-direction: row;
			}
			.search img{
				height:3vh;
			}
			.left{
				margin-left: 2vh;
			}
			.right{
				margin-left: 1vh;
			}
			
			.input-box{
				width:65vw;
				height: 3.3vh;
				font-size: 1.5vh;
				margin-left: 3vw;
			}
		

			.icon {
				margin-left: 1vw;
			}

			.center-box {
				box-sizing: border-box;
				width: 94vw;
				height: 23vh;
				margin-left: 2vw;
				border-radius: 1vh;
				margin-top: 1vh;
				background-color: #fff;
				position: relative;
			}
			.centre-text{
				position: absolute;
				left:2vw;
				top:0.5vh;
				font-size: 2.5vh;
			}

			/* 论坛区 */
            .app-container {
		    box-sizing: border-box;
			display: flex;
			border-radius: 1vh;
			width: 94vw;
			height: 15vh;
			background-color: #fff;
			margin: 0 auto;
			}
			.picture {
				width: 10vh;
				height: 12vh;
				position: relative;
				top:3vh;
				margin: 1.2vh;
			}
			
			.picture img{
				width: 100%;
				position: absolute;
				top:50%;
				transform: translateY(-50%);
			}
          
            .picture::after {
				content: attr(data-text);
				/* 读取data-text属性的值作为content内容 */
				display: block;
				clear: both;
				font-size: 2vh;
				position: absolute;
				text-align: left;
				margin-left: 1.5vw;
				bottom: -3vh;
				width: 13vw;
				
			}

			.more {
				width: 6vw;
				height: 6vw;
				position: relative;
				display: block;
				background-color: #fff;
				margin-top: 8vh;
				margin-left: 1vw;
			}

			


			.more01 {
				width: 6vh;
				height: 6vh;
				float: left;
				margin-left: 10.5vw;
				background-color: #fff;
				margin-top: 2vh;
				font-size: 6.6vh;
			}

			/* 用户区域 */
			.use-box {
			width: 94vw;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			margin-left: 2vw;
			margin-top: 1vh;
			border-radius: 1vh;
			}
			.use01{
				margin: 2vh 2vh;
				display: flex;
				flex-direction: row;
				margin-left: 1vw;
			}
			/* 用户头像 */
			.user-icon {
				width: 6vh;
				height: 6vh;
				background-color: black;
				border-radius: 50vw;
				margin-left: 0vw;
				
			}

			/* 用户名称 */
			.user-name {
				color: black;
				font-size: 15px;
				margin-left: 1vw;
			}
			/* 用户发表时间 */
			.user-time {
				font-size: 12px;
				color: gray;
			}
			.user-text{
				margin: 0 2vh;
			}
			

			.use-operate{
				display: flex;
				flex-direction: row;
				margin: 2vh 3vw;
			}
			.use-operate p:nth-child(1){
				font-size: 20px;
			}
			.use-operate p:nth-child(2){
				font-size: 20px;
				margin-left: 40vw;
			}

		</style>
		<title></title>
	</head>
	<body>
		<div class="iconfont background-box">
			<a href="/index.html" style="text-decoration: none;">
				<span class="icon">&#xe72e;</span>
			</a>
			<p style="flex: 3;text-align: center;">论坛入口</p>
		</div>
		<div class="search">
			<div>
				<img src="nothing.png" alt = " /" class="left">
			</div>
			<div>
				<input class="input-box" type="text" placeholder="请输入您需要搜索的帖子">
		    </div>
			<div>
				<img src="sousuo.png" alt = " /" class="right">
			</div>
		</div>
		
		
		
		<div class="center-box">
			<p class ="centre-text">我关注的论坛区</p>
		<div class="app-container">
		    <div class="picture" data-text="四六级">
				<img src="siliuji.png" alt="" />
			</div>
			<div class="picture" data-text="摄影">
				<img src="sheying.png" alt="" />
			</div>
			
			<div class="picture" data-text="考研">
				<img src="kaoyan.png" alt="" />
			</div>
			<div class="picture" data-text="树洞">
				<img src="shudong.png" alt="" />
			</div>
			<div class="picture" data-text="">
				<img src="gengduo.png" alt="" />
			</div>
			<!-- <div class="iconfont more">&#xe60e;</div> -->
		</div>
		</div>
		<div class="center-box">
			<p class ="centre-text">我关注的论坛区</p>
		<div class="app-container">
		    <div class="picture" data-text="打听">
				<img src="yuanxiaodatin.png" alt="" />
			</div>
			<div class="picture" data-text="篮球">
				<img src="lanqiu.png" alt="" />
			</div>
			
			<div class="picture" data-text="考证">
				<img src="kaozheng.png" alt="" />
			</div>
			<div class="picture" data-text="美食">
				<img src="meishi.png" alt="" />
			</div>
			<div class="picture" data-text="">
				<img src="gengduo.png" alt="" />
			</div>
			<!-- <div class="iconfont more">&#xe60e;</div> -->
		</div>
		</div>
		
		<!-- 用户区 -->
		<div class="use-box">
			<div class="use01">
				<div class= "user-icon">
					<img src="" alt="" />
				</div>
				<div class="user-name">郑暗黑
				<div class="user-time">2021-10-1</div>
				</div>
			</div>
			<div class="user-text">
				今天跟一个HR老友聊天，对方说到：候选人最好不要频繁跳槽.
			</div>
			
			<div class="use-operate">
				<p class="iconfont">&#xe60f;喜欢</p>
				<p class="iconfont">&#xe7f5;评论</p>
			</div>
		</div>
		
		<!-- 用户区 -->
		<div class="use-box">
			<div class="use01">
				<div class= "user-icon">
					<img src="" alt="" />
				</div>
				<div class="user-name">郑暗黑
				<div class="user-time">2021-10-1</div>
				</div>
			</div>
			<div class="user-text">
				今天跟一个HR老友聊天，对方说到：候选人最好不要频繁跳槽.
			</div>
			
			<div class="use-operate">
				<p class="iconfont">&#xe60f;喜欢</p>
				<p class="iconfont">&#xe7f5;评论</p>
			</div>
		</div>
		
		<!-- 用户区 -->
		<div class="use-box">
			<div class="use01">
				<div class= "user-icon">
					<img src="" alt="" />
				</div>
				<div class="user-name">郑暗黑
				<div class="user-time">2021-10-1</div>
				</div>
			</div>
			<div class="user-text">
				今天跟一个HR老友聊天，对方说到：候选人最好不要频繁跳槽.
			</div>
			
			<div class="use-operate">
				<p class="iconfont">&#xe60f;喜欢</p>
				<p class="iconfont">&#xe7f5;评论</p>
			</div>
		</div>
	</body>
</html>
